﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>/*<![CDATA[*/

table{border: 1px solid gray;}
td{border: 1px dotted gray;}
p{margin: 3px 0 3px 0; padding: 0;}
#ID_Footer{font-size: small; font-style: italic; text-align: right; margin-top: 4em; padding-top: 4px; border-top: 2px solid gray;}

/*]]>*/</style><title>第15章 布局</title></head><body>
<div><span style="font-family: 宋体; font-size: 26pt; font-weight: bold; padding-left: 77pt; line-height: 280%">第</span><span style="font-family: Calibri; font-size: 26pt; font-weight: bold; padding-left: 77pt; line-height: 280%">15</span><span style="font-family: 宋体; font-size: 26pt; font-weight: bold; padding-left: 77pt; line-height: 280%">章 &nbsp; &nbsp; &nbsp; &nbsp;布局</span></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; padding-left: 18pt"><br></span></div><div><span style="font-family: 微软雅黑; font-size: 16pt; padding-left: 18pt">1. &nbsp; &nbsp; &nbsp; &nbsp;概念</span></div><div><span style="font-family: 微软雅黑; font-size: 16pt; padding-left: 18pt"><br></span></div>
<div><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">"块级"盒子</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> &amp;</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">"内联"盒子</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p350)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">包含元素、父级元素</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">(p351)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">position</span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">属性</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> &amp; </span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">定位机制</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p352)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">float</span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">属性、浮动</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p352)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">普通流、相对定位、绝对定位</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p352)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">固定定位</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> &amp; </span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">浮动元素</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p353)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">z-index</span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">属性</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p353)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">元素并排？</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">(p360-361)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">首屏</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> above the fold (p368)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">固定宽度布局、流体布局</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p371)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">960</span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">像素网格</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> (p376-379)</span></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt"><br></span></div><div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt">2. &nbsp; &nbsp; &nbsp; &nbsp;属性</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; color: #ff0000; line-height: 160%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; color: #ff0000; line-height: 160%">普通流</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">HTML</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">元素的默认方式</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p354)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">position: static; </span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 160%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 160%">相对定位</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">，以其在普通流中的位置为起点进行移动，单位像素、</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">em</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">、百分比</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p355)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">position: relative;</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">top</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">属性，向远离</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">top</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">方向（向下）偏移距离</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">属性，远离</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">方向（向右）偏移距离</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">bottom</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">、</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">right</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">属性</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 160%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 160%">绝对定位</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">，脱离普通流，如同其不在那个位置一样，相对于包含他的元素的位置。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">(p356)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">position:absolute;</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">top, left, width</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">等属性</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">margin:0px;</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%"> </span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">删除</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">h1</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">元素上方默认外边距</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 160%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 160%">固定定位</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">，相对于浏览器窗口进行定位，滚动页面时保持不变</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p357)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">position:fixed;</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">top</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">等属性</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%">z-index</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 150%">属性</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 150%"> (</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 150%">堆叠上下文，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 150%">p258)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">默认后出现的元素位于上面</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">值：数字，越大层次越靠前（在上面）</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%">float</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 150%">属性，使普通流中的元素在它的包含元素内尽可能的向左或向右排列</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">值：</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">right</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> (p359)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 150%">clear</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 150%">属性，清除浮动，表明一个元素的左或右不允许浮动元素</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">值：</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">left</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">right</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">both</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">none</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> (p361)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%">仅包含一个浮动元素的盒子被某些浏览器看成高度为</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 150%">0</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%">的问题</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 150%"> (p363)</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">方案</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">1</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">：插入一个额外的元素</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">方案</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">2</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">：</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">overflow</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">属性设为</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">auto</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, width</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">属性设置为</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">100%</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #000000; line-height: 150%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #000000; line-height: 150%">利用浮动创建多列式布局</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #000000; line-height: 150%"> (p364)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">各列分别设置列宽</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">设置</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">float</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">为</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">left</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 150%"><br></span></div><div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 150%">960</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%">网格系统</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 150%"> </span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%">（</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 150%">p380</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%">）</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">960.gs</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">包含整个页面的元素，</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">class="</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">container_12</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">"</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">其它元素，类</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">grid_3</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">, </span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">grid_4</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">等</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">添加网格的</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">CSS</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">clearfix</span><span style="font-family: 华文楷体; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">值，确保浏览器能够了解包含例子的高度</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%"> (p382)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%"><br></span></div><div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 150%">多个样式表</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">在</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">CSS</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">文件中</span><span style="font-family: Times New Roman; font-size: 11pt; color: #c00000; padding-left: 21pt; line-height: 150%">@import url("some.css")</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 21pt; line-height: 150%">;</span></div>
<div><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">或，</span><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 21pt; line-height: 150%">&lt;link&gt;</span><span style="font-family: 华文楷体; font-size: 11pt; padding-left: 21pt; line-height: 150%">中分别引用</span></div>
<div><br></div>
<div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><script type="text/javascript" language="javascript" src="jquery.js"></script><script type="text/javascript" language="javascript" src="itemlink.js"></script></body></html>